<template>
  <div class="header_info">
    <div class="left_info">
      <div class="picture1">
        <img :src="top1Img" alt="">
        <p>计划</p>
      </div>
      <div class="left_1 info_style">
        <p class="large">{{l1}}</p>
        <p class="small">当年计划总数</p>
      </div>
      <div class="left_2 info_style">
        <p class="large">{{l2}}</p>
        <p class="small">变更计划总数</p>
      </div>
      <div class="left_3 info_style">
        <p class="large">{{l3}}</p>
        <p class="small">实际计划总数</p>
      </div>
    </div>
    <div class="right_info">
      <div class="picture1">
        <img :src="top2Img">
        <p>项目</p>
      </div>
      <div class="right_1 info_style">
        <p class="large">{{r1}}</p>
        <p class="small">总项目数</p>
      </div>
      <div class="right_2 info_style">
        <p class="large">{{r2}}</p>
        <p class="small">计划完成率</p>
      </div>
      <div class="right_3 info_style">
        <p class="large">{{r3}}</p>
        <p class="small">待执行</p>
      </div>
      <div class="right_4 info_style">
        <p class="large">{{r4}}</p>
        <p class="small">正在执行</p>
      </div>
      <div class="right_5 info_style">
        <p class="large">{{r5}}</p>
        <p class="small">执行完毕</p>
      </div>
    </div>
  </div>
</template>

<script>
  import top1 from '../../../assets/top1.png'
  import top2 from '../../../assets/top2.png'

  export default {
    name: "Top",
    data() {
      return {
        l1: '',
        l2: '',
        l3: '',
        r1: '',
        r2: '',
        r3: '',
        r4: '',
        r5: '',
        top1Img: top1,
        top2Img: top2,
      }
    }
  }
</script>

<style scoped>
  p {
    margin: 0 !important;
  }

  .header_info, .right_info, .left_info {
    display: flex;
    margin: 0 0 15px 0;
  }

  .header_info {
    -webkit-box-pack: justify;
    justify-content: space-between;
  }

  .info_style {
    text-align: right;
    width: 100%;
    margin: 0 5px;
    flex: 1;
  }

  .left_2, .left_3 {
    border-left: 1px solid #afc8fe;
  }

  .right_2, .right_3, .right_4, .right_5 {
    border-left: 1px solid #fed09e;
  }

  .left_info {
    flex: 4;
    position: relative;
    width: 100%;
    height: 66px;
    margin-left: 25px;
    background-color: #5f90fc;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
  }

  .large {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
  }

  .small {
    font-size: 14px;
    color: #fff;
  }

  .right_info {
    flex: 6;
    position: relative;
    width: 100%;
    height: 66px;
    margin-left: 40px;
    background-color: #fca03c;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
  }

  .left_info .picture1 {
    position: absolute;
    top: 3px;
    left: -25px;
    z-index: 99;
    width: 58px;
    height: 58px;
    line-height: 20px;
    box-sizing: border-box;
    border-radius: 3px;
    color: #5f90fc;
    border: 1px solid #5f90fc;
    box-shadow: 1px 2px 3px #666;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .right_info .picture1 {
    position: absolute;
    top: 3px;
    left: -25px;
    z-index: 99;
    width: 58px;
    height: 58px;
    line-height: 20px;
    box-sizing: border-box;
    border-radius: 3px;
    color: #fca03c;
    border: 1px solid #fca03c;
    box-shadow: 1px 2px 3px #666;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }
</style>